<div class="shrink-0 flex justify-between items-center p-4">
  <div class="font-semibold">
    {{xpertAgent().title || xpertAgent().name || xpertAgent().key}}
  </div>

  <button type="button" class="btn-close btn btn-secondary flex items-center justify-center w-6 h-6 cursor-pointer z-20"
    (click)="close.emit()">
    <i class="ri-close-line"></i>
  </button>
</div>

<div class="flex-1 pl-4 pr-2 overflow-auto">
  @if (parameters()?.length) {
    <xpert-parameters-card [parameters]="parameters()" [(ngModel)]="parameterValue" />
  }
  <div class="h-6 mb-1 mt-2 flex items-center gap-1 text-text-secondary system-sm-semibold">
    <div class="truncate">
      <div class="mx-0.5 text-sm font-medium text-gray-700 max-w-[150px] truncate"
        [title]="'PAC.Xpert.AskQuestion' | translate: {Default: 'Ask a question'} ">{{ 'PAC.Xpert.AskQuestion' | translate: {Default: 'Ask a question'} }}</div>
    </div>
  </div>
  <div class="grow">
    <input class="w-full px-3 text-sm leading-8 text-gray-900 border-0 rounded-lg grow h-8 bg-gray-50 focus:outline-none focus:ring-1 focus:ring-inset focus:ring-gray-200"
      [placeholder]="'PAC.Xpert.PleaseInput' | translate: {Default: 'Please input'}"
      type="text"
      [(ngModel)]="input"
      (keyup.enter)="onKeyEnter($event)"
    >
  </div>

  <div class="mt-4 flex justify-between space-x-2">
    <button type="button" class="btn disabled:btn-disabled btn-primary w-0 h-10 grow space-x-2"
      [disabled]="loading() || status() === eExecutionStatusEnum.INTERRUPTED"
      (click)="startRunAgent()"
    >
      <div class="w-full flex justify-center">{{ 'PAC.Xpert.StartRun' | translate: {Default: 'Start run'} }}</div>
    </button>

    @if (loading()) {
      <button type="button" class="btn disabled:btn-disabled h-10 btn-danger pressable"
        (click)="stopAgent()"
      >
        <div class="w-full text-center">
          <i class="ri-stop-line"></i>
          {{ 'PAC.Xpert.Stop' | translate: { Default: 'Stop' } }}
        </div>
      </button>
    }
  </div>

  @if (execution(); as execution) {
    <xpert-agent-execution-status class="p-2 w-full mt-4" [execution]="execution" />
  }

  <div class="flex items-center my-4 leading-[18px] text-base font-semibold text-gray-500 uppercase">
    <div class="mr-3">{{ 'PAC.Xpert.Output' | translate: {Default: 'Output'} }}</div>
    <div class="grow w-0 h-px bg-divider-regular"></div>
  </div>

  @if (status() === eExecutionStatusEnum.INTERRUPTED && operation()) {
    <xpert-tool-call-confirm class="w-full"
      [operation]="operation()"
      (confirm)="onConfirm()"
      (reject)="onReject()"
      (toolCallsChange)="onToolCalls($event)"
    />
  }

  <div class="mt-4 p-2 text-sm min-h-[60px] max-h-80 overflow-auto rounded-xl bg-neutral-100 dark:bg-neutral-700">
    <markdown class="ngm-copilot-markdown"
      lineNumbers
      [start]="5"
      [data]="output()"
    />
  </div>

  <div class="w-full flex flex-col mt-4">
    <div class="flex items-center mb-4 leading-[18px] text-base font-semibold text-gray-500 uppercase">
      <div class="flex items-center ">
        <!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6 text-text-tertiary">
          <path d="M12 15.0006L7.75732 10.758L9.17154 9.34375L12 12.1722L14.8284 9.34375L16.2426 10.758L12 15.0006Z"></path>
        </svg> -->
        <div class="mr-3">{{ 'PAC.Xpert.Log' | translate: {Default: 'Log'} }}</div>
      </div>
      <div class="grow w-0 h-px bg-divider-regular"></div>
    </div>

    <div class="flex flex-col gap-2 p-2">
      @for (item of executions(); track item) {
        <div class="flex items-center my-4 leading-[18px] text-sm font-semibold text-gray-500 uppercase">
          <div class="flex items-center cursor-pointer rounded-md hover:bg-hover-bg" (click)="toggleExpand(item.agent?.key)">
            @if (item.expand) {
              <i class="ri-arrow-drop-down-line"></i>
            } @else {
              <i class="ri-arrow-drop-right-line"></i>
            }
            <div class="mr-3">{{item.agent?.title || item.agent?.name || item.agent?.key}}</div>
          </div>
          <div class="grow w-0 h-px bg-divider-regular"></div>
        </div>

        @if (item.expand) {
          @for (execution of item.executions; track execution.id) {
            <div class="flex items-center w-full my-2">
              <div class="grow h-[1px] bg-divider-regular"></div>
              <div class="mx-2 max-w-[50%] truncate text-xs text-text-secondary" [title]="execution.title">{{execution.title || execution.id}}</div>
              <div class="grow h-[1px] bg-divider-regular"></div>
            </div>
            @for (message of execution.messages; track $index) {
              <copilot-stored-message [message]="message" />
            }
          }
        }
      }
    </div>
  </div>
</div>